<template>
    <div class="vaccine">
        <!--品种统计-->
        <div class="variety">
            <div class="info">
                <Title><h3>疫苗资料库</h3></Title>
                <div class="searchVariety">
                    <el-input v-model="searchVariety.name" placeholder="请输入疫苗名称" clearable />
                    <el-input v-model="searchVariety.ID" placeholder="请输入疫苗ID" clearable />
                    <el-button type="primary">搜索</el-button>
                    <el-button type="primary" @click="addVariety">添加</el-button>
                </div>
                <!--添加疫苗弹出框-->
                <el-dialog v-model="addDialog" title="添加疫苗库存">
                    <el-form :model="addStock">
                        <el-form-item label="疫苗名称" :label-width="200">
                            <el-input v-model="addStock.name" :options="Vaccines" clearable class="stackinput" />
                        </el-form-item>
                        <el-form-item label="疫苗类别" :label-width="200">
                            <el-radio-group v-model="addStock.type">
                                <el-radio label="0" v-model="addStock.type">儿童疫苗</el-radio>
                                <el-radio label="1" v-model="addStock.type">老人疫苗</el-radio>
                                <el-radio label="2" v-model="addStock.type">成人疫苗</el-radio>
                                <el-radio label="3" v-model="addStock.type">女性疫苗</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="疫苗介绍" :label-width="200">
                            <el-input v-model="addStock.introduce"
                                      :options="Vaccines"
                                      :rows="5"
                                      type="textarea"
                                      class="stackinput"/>
                        </el-form-item>
                        <el-form-item label="定价" :label-width="200">
                            <el-input v-model="addStock.priceNext" autocomplete="off" class="stackinput"></el-input>
                        </el-form-item>
                        <el-form-item label="注意事项" :label-width="200">
                            <el-input v-model="addStock.notice" autocomplete="off" class="stackinput"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" :label-width="200">
                            <el-input v-model="addStock.number" autocomplete="off" class="stackinput"></el-input>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                        <el-button @click="addDialog = false">取消</el-button>
                        <el-button type="primary" @click="addStacks">添加</el-button>
                        </span>
                    </template>
                </el-dialog>
                <div class="orderList">
                    <el-scrollbar  height="600px">
                        <el-table :data="Variety" style="display: flex;height: 600px;" stripe  v-loading="loading" >
                            <el-table-column prop="id" label="疫苗编号" width="150" />
                            <el-table-column prop="name" label="疫苗名称" width="200" />
                            <el-table-column prop="type" label="疫苗类型" width="150" >
                                <template v-slot="scope">
                                    <span v-if="scope.row.type=='0'">儿童疫苗</span>
                                    <span v-if="scope.row.type=='1'">老人疫苗</span>
                                    <span v-if="scope.row.type=='2'">成人疫苗</span>
                                    <span v-if="scope.row.type=='3'">女性疫苗</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="introduce" label="疫苗介绍" width="400" />
                            <el-table-column prop="priceNext" label="定价" width="90" >
                                <template v-slot="scope">
                                    <span style="color: red">￥{{scope.row.priceNext}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="notice" label="注意事项" width="300" />
                            <el-table-column prop="number" label="库存" width="150" />
                            <el-table-column fixed="right" label="操作" width="200">
                                <template v-slot="scope">
                                    <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
                                    <el-button type="text" size="small" @click="cencle(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-scrollbar>
                </div>
                <!--修改疫苗弹出框-->
                <el-dialog v-model="editDialog" title="修改疫苗信息">
                    <el-form :model="editStock">
                        <el-form-item label="疫苗名称" :label-width="200">
                            <el-input v-model="editStock.name" :options="Vaccines" clearable class="stackinput" />
                        </el-form-item>
                        <el-form-item label="疫苗类别" :label-width="200">
                            <el-radio-group v-model="editStock.type">
                                <el-radio label="0" v-model="editStock.type">儿童疫苗</el-radio>
                                <el-radio label="1" v-model="editStock.type">老人疫苗</el-radio>
                                <el-radio label="2" v-model="editStock.type">成人疫苗</el-radio>
                                <el-radio label="3" v-model="editStock.type">女性疫苗</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="疫苗介绍" :label-width="200">
                            <el-input v-model="editStock.introduce"
                                      :options="Vaccines"
                                      :rows="5"
                                      type="textarea"
                                      class="stackinput text"/>
                        </el-form-item>
                        <el-form-item label="定价" :label-width="200">
                            <el-input v-model="editStock.priceNext" autocomplete="off" class="stackinput"></el-input>
                        </el-form-item>
                        <el-form-item label="注意事项" :label-width="200">
                            <el-input v-model="editStock.notice" autocomplete="off" class="stackinput"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" :label-width="200">
                            <el-input v-model="editStock.number" autocomplete="off" class="stackinput"></el-input>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                        <el-button @click="editDialog = false">取消</el-button>
                        <el-button type="primary" @click="editStacks">修改</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>

        </div>
    </div>
</template>

<script>
    import Title from './Title'
    export default {
        name: "Vaccine",
        components:{Title},
        data(){
            return{
                Variety:[
                    {
                        id:'Ab2378',
                        name:'九价hpv疫苗',
                        type:'2',
                        introduce:'九价HPV疫苗，是用于预防人乳头瘤病毒（HPV）感染引起的宫颈癌，可以预防90%以上的宫颈癌',
                        priceNext:'1099',
                        notice:'接种前两小时不能进食',
                        number:'300'
                    },
                    {
                        id:'Ab2378',
                        name:'九价hpv疫苗',
                        type:'1',
                        introduce:'九价HPV疫苗，是用于预防人乳头瘤病毒（HPV）感染引起的宫颈癌，可以预防90%以上的宫颈癌',
                        priceNext:'1099',
                        notice:'接种前两小时不能进食',
                        number:'300'
                    }
                ],
                searchVariety:{
                    name:'',
                    ID:'',
                },
                addDialog:false,
                editDialog:false,
                //四种疫苗类型
                //库存对象
                addStock:{
                    name:'',
                    type:'0',
                    introduce:'',
                    priceNext:'',
                    notice:'',
                    number:''
                },
                editStock:{
                    name:'',
                    type:null,
                    introduce:'',
                    pricePre:'',
                    priceNext:'',
                    notice:'',
                    number:''
                },
                //疫苗名称数组
                Vaccines : [
                    {
                        id:1,
                        value: '儿童疫苗',
                        label: '儿童疫苗',
                        children: [
                            {
                                value: '13价肺炎疫苗',
                                label: '13价肺炎疫苗',
                            },
                            {
                                value: '气管炎疫苗',
                                label: '气管炎疫苗',
                            },
                            {
                                value: 'Hib疫苗',
                                label: 'Hib疫苗',
                            },
                            {
                                value: '霍乱疫苗',
                                label: '霍乱疫苗',
                            },
                            {
                                value: '黄热病减毒疫苗',
                                label: '黄热病减毒疫苗',
                            },
                        ],
                    },
                    {
                        value: '成人疫苗',
                        label: '成人疫苗',
                        children: [
                            {
                                value: '新冠疫苗',
                                label: '新冠疫苗',
                            },
                            {
                                value: '乙脑灭火疫苗',
                                label: '乙脑灭火疫苗',
                            },
                            {
                                value: '戊肝疫苗（成人）',
                                label: '戊肝疫苗（成人）',
                            },
                            {
                                value: '痢疾疫苗',
                                label: '痢疾疫苗',
                            },
                            {
                                value: '破伤风疫苗',
                                label: '破伤风疫苗',
                            },
                        ],
                    },
                    {
                        value: '老人疫苗',
                        label: '老人疫苗',
                        children: [
                            {
                                value: '13价肺炎疫苗',
                                label: '13价肺炎疫苗',
                            },
                            {
                                value: '气管炎疫苗',
                                label: '气管炎疫苗',
                            },
                            {
                                value: 'Hib疫苗',
                                label: 'Hib疫苗',
                            },
                            {
                                value: '霍乱疫苗',
                                label: '霍乱疫苗',
                            },
                            {
                                value: '黄热病减毒疫苗',
                                label: '黄热病减毒疫苗',
                            },
                        ],
                    },
                    {
                        value: '女性疫苗',
                        label: '女性疫苗',
                        children: [
                            {
                                value: '13价肺炎疫苗',
                                label: '13价肺炎疫苗',
                            },
                            {
                                value: '气管炎疫苗',
                                label: '气管炎疫苗',
                            },
                            {
                                value: 'Hib疫苗',
                                label: 'Hib疫苗',
                            },
                            {
                                value: '霍乱疫苗',
                                label: '霍乱疫苗',
                            },
                            {
                                value: '黄热病减毒疫苗',
                                label: '黄热病减毒疫苗',
                            },
                        ],
                    }
                    ],

            }
        },
        methods:{
            //修改按钮
            edit(row){
                console.log(row);
                this.editDialog=true
                this.editStock=row
            },
            //添加库存
            addStacks(){
                this.Variety.unshift(this.stock)
                this.addDialog=false;
            },
            //添加疫苗库信息按钮
            addVariety(){
                this.addDialog=true
                this. addStock=
                    {
                    name:'',
                    type:'0',
                    introduce:'',
                    priceNext:'',
                    notice:'',
                    number:''
                }
            },
            //修改疫苗信息
            editStacks(){
                console.log(this.editStock)
            },
            //修改疫苗信息
            cencle(){

            }

        },
        mounted(){

        }
    }
</script>

<style scoped lang="less">
    .stackinput{
        width: 300px;
    }
    .vaccine{
        width: 100%;
        display: flex;
        flex-direction: column;
        .variety{
            display: flex;
            flex-direction: column;
            width: 100%;
            .circle{
                width: 100%;
                height: 300px;
                display: flex;
                background-color: white;
                padding: 10px;
                border-radius: 20px;
                .chile-variety{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    .variety-circle1{
                        flex: 1;
                    }
                }
                .adult-variety{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    .variety-circle2{
                        flex: 1;
                    }
                }
                .old-variety{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    .variety-circle3{
                        flex: 1;
                    }
                }
                .woman-variety{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    .variety-circle4{
                        flex: 1;
                    }
                }
            }

            .info{
                width: 100%;
                display: flex;
                flex-direction: column;
                background-color: white;
                padding: 10px;
                border-radius: 20px;
                margin-top: 15px;
                .searchVariety{
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    span{
                        display: flex;
                        padding: 5px 10px;
                    }
                    .el-input{
                        margin-right: 20px;
                        width: 300px;
                    }
                }
                .orderList{
                    width: 100%;
                    height: 630px;
                }
            }
        }
    }
</style>
